<template>
	<view class="member-center">
		<uv-navbar
			left-icon="close"
			title="会员中心"
			@leftClick="handleBack"
			bg-color="#f6d44c"
			safeAreaInsetTop
			placeholder
		></uv-navbar>
		<view class="member-card">
			<uv-avatar :src="userInfo.avatar_file && userInfo.avatar_file.url" size="60"></uv-avatar>
			<view class="info">
				<view class="name">{{ userInfo.username }}</view>
				<view class="status">{{ memberStatusMap[memberInfo.status] }}</view>
			</view>
		</view>
		<view class="content">
			<view class="select-type">
				<view class="title">选择套餐</view>
				<scroll-view scroll-x style="width: 100%">
					<view class="scroll-type">
						<view
							v-for="(item, index) in typeList"
							:key="index"
							:class="['item', item.type == form.type ? 'active' : '']"
							@click="handleSwitchType(item.type)"
						>
							<view class="date">{{ item.day }}天</view>
							<view class="amount">
								<text class="unit">￥</text>
								<text class="number">{{ item.amount }}</text>
							</view>
							<view class="original">原价：￥{{ item.original }}</view>
							<view class="preferential">立省：￥{{ item.preferential }}</view>
						</view>
					</view>
				</scroll-view>
				<view class="title" style="margin-top: 20px">会员特权</view>
				<view class="privilege">
					<view class="item" v-for="(item, index) in privilegeList" :key="index">
						<uv-icon :name="item.icon" :label="item.text" size="30"></uv-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="subscribe-button">
			<view class="button">
				<view class="amount">
					<view class="label">实付金额：</view>
					<view>￥</view>
					<view class="text">{{ form.amount }}</view>
				</view>
				<view class="submit" @click="handlePlay">立即开通</view>
			</view>
			<view class="rule">
				<uv-checkbox-group v-model="checkedList" shape="circle" active-color="#f6d44c">
					<uv-checkbox name="isRead"></uv-checkbox>
					<view class="label">
						<text class="text" @click="handleSwitchIsRead">已阅读并同意</text>
						<text class="link">《景园会员费规则》</text>
					</view>
				</uv-checkbox-group>
			</view>
		</view>
		<uni-pay ref="uniPayRef" mainColor="#f6d44c" returnUrl="/pages/order-details/order-details"></uni-pay>
	</view>
</template>

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { ref, computed, watch } from "vue";
import hyqdIcon from "@/static/images/hyqd.png";
import wxjdIcon from "@/static/images/wxjd.png";
import sstxIcon from "@/static/images/sstx.png";
import createOrderNo from "@/utils/createOrderNo";

const uniIdCo = uniCloud.importObject("uni-id-co");

const uniPayRef = ref();

const userInfo = ref(uni.getStorageSync("uni-id-pages-userInfo"));

const memberInfo = ref({
	// 0 未开通 1 生效中 2 已过期
	status: 0,
	// 订阅时间
	subscribe_date: "",
	// 订阅类型
	subscribe_type: 0,
	// 到期时间
	expiration_date: ""
});

const checkedList = ref(["isRead"]);

const form = ref({
	amount: 0,
	type: 1
});

const typeList = [
	{
		type: 1,
		day: 30,
		original: 99,
		amount: 89,
		preferential: 10
	},
	{
		type: 2,
		day: 60,
		original: 198,
		amount: 169,
		preferential: 29
	},
	{
		type: 3,
		day: 90,
		original: 297,
		amount: 249,
		preferential: 48
	},
	{
		type: 4,
		day: 365,
		original: 1188,
		amount: 899,
		preferential: 289
	}
];

watch(
	() => form.value.type,
	(newVal) => {
		const currentTypeObj = typeList.find((i) => i.type == newVal);
		form.value.amount = currentTypeObj.amount;
	},
	{
		immediate: true
	}
);

const privilegeList = [
	{
		icon: hyqdIcon,
		text: "会员抢单"
	},
	{
		icon: wxjdIcon,
		text: "无限接单"
	},
	{
		icon: sstxIcon,
		text: "实时提现"
	}
];

const isRead = computed(() => {
	return checkedList.value.includes("isRead");
});

const memberStatusMap = {
	0: "非会员",
	1: "订阅中",
	2: "已到期"
};

const formatName = computed(() => {
	if (userInfo.value) {
		return userInfo.value.mobile
			? userInfo.value.mobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
			: userInfo.value.username;
	}
	return "未知用户";
});

const handleBack = () => {
	uni.navigateBack();
};

const handleGetMemberInfo = async () => {
	const response = await uniIdCo.getMemberInfo({
		userId: userInfo.value._id
	});
	console.log(response);
};

const handleSwitchIsRead = () => {
	if (isRead.value) {
		checkedList.value = [];
	} else {
		checkedList.value = ["isRead"];
	}
};

const handleSwitchType = (event) => {
	console.log(event);
	form.value.type = event;
};

const handlePlay = () => {
	const order_no = createOrderNo();
	const out_trade_no = `${order_no}-vip`;
	uniPayRef.value.open({
		total_fee: Number((form.value.amount * 100).toFixed(0)),
		order_no,
		out_trade_no,
		description: `景元用工订单`,
		type: "recharge",
		custom: form.value
	});
};

onShow(() => {
	handleGetMemberInfo();
});
</script>

<style lang="scss" scoped>
.member-center {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #f6d44c;

	.member-card {
		background-image: linear-gradient(to right top, #ebeff4, #dce1ec);
		margin: 20px 20px 0;
		padding: 20px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		display: flex;
		align-items: center;

		.info {
			margin-left: 10px;

			.name {
				font-size: 16px;
				font-weight: bold;
			}

			.status {
				font-size: 14px;
				color: #595c72;
			}
		}
	}

	.content {
		flex: 1;
		background-color: #f4f5f9;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding: 20px;
		overflow-y: scroll;

		.select-type {
			padding: 20px;
			background-color: #ffffff;
			border-radius: 20px;
			overflow-x: scroll;

			.title {
				font-size: 20px;
				font-weight: bold;
				margin-bottom: 20px;
			}

			.scroll-type {
				padding-bottom: 20px;
				display: flex;
				white-space: nowrap;

				.item {
					margin-right: 20px;
					flex-shrink: 150px;
					width: 150px;
					border: 2px solid #e6e8eb;
					border-radius: 10px;
					padding: 20px 0 10px;
					text-align: center;
					box-sizing: border-box;

					&.active {
						border: 2px solid #ff5a5a;

						.preferential {
							background-color: #fbf8f5;
							color: #e7ae79;
						}
					}

					.date {
						font-size: 18px;
						font-weight: bold;
						margin-bottom: 10px;
					}

					.amount {
						color: #ff5a5a;
						margin-bottom: 10px;
						.number {
							font-size: 28px;
							font-weight: bold;
						}
					}

					.original {
						color: #b7b9c2;
						margin-bottom: 10px;
						text-decoration: line-through;
					}

					.preferential {
						font-size: 14px;
						background-color: #f9fafc;
						color: #b7b9c2;
						border-radius: 20px;
						margin: 0 20px;
						padding: 0 10px;
					}
				}
			}

			.privilege {
				display: flex;
				align-items: center;

				.item {
					margin-right: 10px;
				}
			}
		}
	}

	.subscribe-button {
		background-color: #ffffff;
		padding: 20px;
		box-sizing: border-box;

		.button {
			background-color: #ffffff;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			background: linear-gradient(to right, #ffe286, #ffd54f);
			border-radius: 50px;
			overflow: hidden;

			.amount {
				margin-left: 20px;
				flex: 1;
				display: flex;
				align-items: center;
				color: #ab4f00;

				.label {
				}

				.text {
					font-weight: bold;
					font-size: 20px;
				}
			}

			.submit {
				padding: 20px 20px 20px 40px;
				background: linear-gradient(110deg, transparent 22px, #00ae66 0) top left;
				font-size: 18px;
				font-weight: bold;
				color: #ffffff;
			}
		}

		.rule {
			.label {
				.text {
					color: #666666;
				}
				.link {
					color: $uni-color-warning;
				}
			}
		}
	}
}
</style>
